<template>
	<view class="section test">
		<view class="section-title" v-if="listData.length>0">{{metaData.title}}</view>
		<view class="test-list">
			<view class="test-item" @click="navigateToExam(test)"  v-for="(test,index) in listData" :key="index">
				<view class="test-title">
					<image :src="itemImg" mode="widthFix" class="test-title-icon"></image>
					<text>{{test.title}}</text>
				</view>
				<view class="test-main">
					<m-rate :processedSize="allProcessedSize * test.curProcess/(test.totalProcess==0?1:test.totalProcess)" :allProcessedSize="allProcessedSize" ></m-rate>
					<view class="per">{{test.curProcess}}/{{test.totalProcess}}</view>
					<view class="btn" @click.stop="redoSelf(test)">
						<!-- <view class="btn-text">重置</view> -->
						<image class="btn-img" mode="widthFix" :src="test.redoAble=='0'?resetImg:'/static/exam/reset_grey.png'">
						</image>
						<view class="btn-text">{{test.finishedNum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mRate from '@/components/common/m-rate/index'
	import HomeService from '@/services/homepage/index';
    const homeService = new HomeService();
	export default {
		props:{
			metaData:{
				type:Object,
				default:function(){
					return {}
				}
			},
			dataFromCode:{
				type:String,
				default:''
			}
		},
        components:{mRate},
		data(){
			return {
				allProcessedSize:10,
				listData:this.metaData.list,
			}
		},
		computed:{
			itemImg(){
				return this.metaData.itemImg==undefined?'/static/img/home/test-icon.png':this.metaData.itemImg
			},
			resetImg(){
				return this.dataFromCode=='3'?'/static/exam/reset_blue.png':'/static/exam/reset_green.png'
			}
		},
		methods:{
			navigateToExam({route,totalProcess}){
				if(route==undefined || totalProcess == 0){
				}else{
					 uni.navigateTo({
					    url: route
					})
				}
				return false;
			},
			getExamByCode({code}){
				homeService.getExamByCode({code}).then(
					resultDto=>{
						if(resultDto.success){
							this.listData = resultDto.result;
						}
					}
				)
			},
			readRedoSelf(item){
				const param = {
					selfId:item.selfId,
					knowledgeId:item.knowledgeId,
					ascription:this.dataFromCode
				}
				homeService.redoSelf(param).then((response)=>{
					if(response.success){
						//刷新真个自主练习列表
						this.getExamByCode({code:this.dataFromCode})
					}else{
						uni.showToast({
							title:response.message,
							icon:'none',
							duration:2000
						})
					}
					return false;
				});
				return false;
			},
			//重置自主练习
			//selfId ,knowledgeId,ascription
			redoSelf(item){
				if(item.redoAble=='1'){
					return false;
				}
				let self = this;
				uni.showModal({
					content:'重置后可重新做题，确定重置吗？',
					success:(res)=>{
						if (res.confirm) {
							self.readRedoSelf(item);
						}
					}
				})
				
			}
		},
		mounted(){
			const dataFromCode = this.dataFromCode;
			uni.$on('onUpdateExam',(payload)=>{  
				const {code} = payload;
				console.log('onUpdateExam:',code)
				if(dataFromCode == code){
					this.getExamByCode({code})
				}
			});
		},
		destroyed() {
			uni.$off('onUpdateExam');
		}
	}
</script>

<style lang="scss" scoped>
	.section {
		&-title {
			font-size: 30upx;
			color: #333333;
			padding: 0 22upx;
		}
	}
	.test {
		// padding-bottom: 50upx;
		&-item {
			// margin-top: 40upx;
			padding: 20upx;
			padding-right: 12upx;
			// padding: 0 20upx;
		}
		&-title {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 30upx;
			color: #333;
			align-items: center;
			
			&-icon {
				width: 39upx;
				height: 39upx;
				margin-right: 13upx;
			}
		}
		&-main {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
	}
	.per {
		font-size: 24upx;
		color: #666666;
	}
	.btn{
		margin-left: auto;
		position: relative;
		width:60upx;
		height: 60upx;
		flex: 1;
		text-align: right;
		&-img{
			width:60upx;
		}
		&-text{
			position: absolute;
			text-align:center;
			line-height: 60upx;
			top: 0;
			width: 60upx;
			right: 0;
			font-size: 18upx;
			color: #666666;
		}
	}
</style>
